<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>查看共享客户</title>
    <!--引入vue-->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--引入axios-->
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <!-- 引入Element样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入Element组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>

</head>
<body>
    <div id="app">

        <!--展示所有共享数据的信息表格-->
        <el-table
                :data="tableData"
                border
                style="width: 100%">
            <el-table-column
                    prop="customerId"
                    label="客户编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="customerName"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="address"
                    label="地址">
            </el-table-column>
            <el-table-column
                    prop="firstTel"
                    label="联系方式">
            </el-table-column>
            <el-table-column
                    prop="make"
                    label="意向产品品牌">
            </el-table-column>
            <el-table-column
                    prop="line"
                    label="意向产品车系">
            </el-table-column>
            <el-table-column
                    prop="type"
                    label="意向产品车型">
            </el-table-column>

            <el-table-column
                    :filters="[{ text: '共享给他人', value: '0' }, { text: '他人共享给自己', value: '1' }]"
                    :filter-method="filterTag"
                    filter-placement="bottom-end"
                    column-key="isShare"
                    prop="isShare" label="共享客户来源">
                <template slot-scope="scope">
                    <el-tag
                            type='success'
                            v-if="scope.row.isShare == 0"
                            disable-transitions>共享给他人</el-tag>
                     <el-tag
                            type='primary'
                            v-if="scope.row.isShare == 1"
                            disable-transitions>他人共享给自己</el-tag>

                <!--<el-button

                        size="mini"
                        type="primary"
                        ></el-button>-->
                </template>
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            type="warning"
                            v-if="scope.row.isShare == 0"
                            @click="cancelShare(scope.$index, scope.row)">取消共享</el-button>

                </template>
            </el-table-column>
        </el-table>
    </div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            tableData: [],
            count:10,
            Share:"122121"
        },
        methods:{
            cancelShare:function (index, row) {
                console.log(row.customerId);
                //传递customerId 将uc表的该客户非0的两条数据删除
                let url = 'cancelShareCustomer?cid='+row.customerId
                axios.post(url, {})
                    .then(function (response) {
                        if (response.data.resultStatus == 1) {
                            vm.open2(response.data.message);
                            url = "listShareCustomer"
                            axios.post(url,{})
                                .then(function (response) {
                                    vm.tableData = response.data;

                                });
                        }else {
                            vm.open3(response.data.message);
                        }
                    })
                    .error(function (error) {
                        console.log(error);
                    })

            },
            filterTag(value, row, column) {
                const property = column['property'];
                return row[property] === value;
            },
            open2(msg) {
                this.$message({
                    message: msg,
                    type: 'success'
                });
            },

            open3(msg) {
                this.$message({
                    message: msg,
                    type: 'warning'
                });
            },

        },
        created:function () {
           var url = "listShareCustomer";
            var _self = this;
            axios.post(url,{})
                .then(function (response) {
                    _self.tableData = response.data;

                });
        }
    })

</script>
</body>
</html>